<!-- 电子签名 -->
<template>
  <view class="electronicSignature">
    <u-popup
      v-model="show"
      mode="center"
      :borderRadius="12"
      :mask-close-able="false"
    >
      <view class="eSign_popup">
        <view class="eSing_header flex-center">
          请签名后确认签收此订单
          <u-icon name="close" class="close" @click="singCancel"></u-icon>
        </view>
        <view class="eSing_canvas" @touchmove.stop.prevent="moveHandle">
          <canvas
            class="mycanvas"
            canvas-id="mycanvas"
            @touchstart.stop="touchstart"
            @touchmove.stop="touchmove"
            @touchend.stop="touchend"
          >
          </canvas>
          <view class="resetSing flex-middle" @click="resetSign">
            <image
              src="https://copartner.oss-cn-beijing.aliyuncs.com/logo/2409/29/wdG2dlJ2m6HPoqv5RDP2iDIvgJY36ep9M4uHkpsD.png"
            ></image>
            <text>重签</text>
          </view>
        </view>
        <view class="foot flex-btw">
          <view class="foot_button cancel flex-center" @click="singCancel">取消</view>
          <view class="foot_button confirm flex-center" @click="signConfirm">确认</view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
let app = getApp();
export default {
  name: "electronicSign",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ctx: null,
      points: [],
      headerStyleHeight: 0,
      headerStyleTop: 0,
      signature: "",
      path: "",
      image: "",
    };
  },
  created() {
    this.ctx = uni.createCanvasContext("mycanvas", this); //创建绘图对象
    //设置画笔样式
    this.ctx.lineWidth = 3;
    this.ctx.lineCap = "round";
    this.ctx.lineJoin = "round";
    // 画笔颜色
    this.ctx.setStrokeStyle("#000");
  },
  methods: {
    // 当手指触摸Canvas时禁止页面滚动
    moveHandle() {
      return;
    },
    //触摸开始，获取到起点
    touchstart(e) {
      let startX = e.changedTouches[0].x;
      let startY = e.changedTouches[0].y;
      let startPoint = {
        X: startX,
        Y: startY,
      };
      this.points.push(startPoint);
      //每次触摸开始，开启新的路径
      this.ctx.beginPath();
    },

    //触摸移动，获取到路径点
    touchmove(e) {
      let moveX = e.changedTouches[0].x;
      let moveY = e.changedTouches[0].y;
      let movePoint = {
        X: moveX,
        Y: moveY,
      };
      this.points.push(movePoint); //存点
      let len = this.points.length;
      if (len >= 2) {
        this.draw(); //绘制路径
      }
    },
    //触摸结束，清除points中的点
    touchend() {
      // console.log('结束')
      this.points = [];
    },
    // canvas绘制路径
    draw() {
      let point1 = this.points[0];
      let point2 = this.points[1];
      this.points.shift();
      this.ctx.moveTo(point1.X, point1.Y);
      this.ctx.lineTo(point2.X, point2.Y);
      this.ctx.stroke();
      this.ctx.draw(true);
    },
    //签字确认
    signConfirm() {
      const that = this;
      // 将canvas中的签字转为临时文件（图片）
      uni.canvasToTempFilePath({
        canvasId: "mycanvas",
        fileType: "jpg",
        // destWidth: 100,
        // destHeight: 100,
        quality: 1,
        success: function (res) {
          // 重新设置画笔宽度，以防二次签字画笔变细
          that.ctx.lineWidth = 3;
          // 将图片上传到文件服务器
          uni.uploadFile({
            url: app.globalData.rootUrl + "/partner/uploadFeedImg",
            filePath: res.tempFilePath,
            name: "img",
            formData: {
              type: 2,
            },
            header: {
              Authorization: uni.getStorageSync("copartner_token"),
            },
            success: (file) => {
              // 签字图片上传成功，将图片路径传给父级组件
              let { data } = JSON.parse(file.data);
              that.$emit("confirm", data.src);
            },
          });
        },
      });
    },
    // 取消签字
    singCancel() {
      this.$emit("cancel");
    },
    // 重新签字
    resetSign() {
      this.clear();
    },
    //清空画布
    clear() {
      let that = this;
      uni.getSystemInfo({
        success(res) {
          let canvasw = res.windowWidth;
          let canvash = res.windowHeight;
          that.ctx.clearRect(0, 0, canvasw, canvash);
          that.ctx.draw(true);
          that.ctx.setFillStyle('#fff');
        },
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.electronicSignature {
  .mycanvas {
    outline: 1rpx solid #999999;
    border-radius: 6rpx;
    width: 630rpx;
    height: 310rpx;
    margin: 0 auto;
    background-color: #ffffff;
  }
  .eSign_popup {
    width: 690rpx;
    padding: 0 20rpx 30rpx;
    background-color: #f2f2f2;
    .eSing_header {
      position: relative;
      width: 630rpx;
      height: 100rpx;
      margin: 0 auto;
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
      .close {
        position: absolute;
        right: 0;
      }
    }
    .eSing_canvas {
      position: relative;
      .resetSing {
        position: absolute;
        bottom: 10rpx;
        right: 25rpx;
        text {
          font-family: PingFang SC;
          font-weight: bold;
          font-size: 26rpx;
          color: #333333;
        }
        image {
          width: 32rpx;
          height: 32rpx;
          margin-top: 2rpx;
          margin-right: 4rpx;
        }
      }
    }
    .foot {
      width: 630rpx;
      margin: 50rpx auto 0;
      display: flex;
      .foot_button {
        width: 300rpx;
        height: 90rpx;
        background: #ffffff;
        border-radius: 45rpx;
        border: 1px solid #000000;
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 30rpx;
      }
      .cancel {
        color: #000000;
        opacity: 0.85;
      }
      .confirm {
        background: #40ae36;
        border: 1px solid #40ae36;
        color: #ffffff;
      }
    }
  }
}
</style>
	
